import 'package:flutter/material.dart';

/// PaddingTestRoute 展示了多种 Padding 的用法和效果。
class PaddingTestRoute extends StatelessWidget {
  const PaddingTestRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Padding 示例'),
      ),
      body: SingleChildScrollView(
        child: Padding(
          // 整体外层添加16像素的内边距
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start, // 左对齐
            children: <Widget>[
              _buildItem(
                label: "左侧填充8像素",
                padding: const EdgeInsets.only(left: 8),
              ),
              _buildItem(
                label: "上下填充8像素",
                padding: const EdgeInsets.symmetric(vertical: 8),
              ),
              _buildItem(
                label: "左20，上0，右20，下20像素",
                padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
              ),
              _buildItem(
                label: "四边填充12像素",
                padding: const EdgeInsets.all(12),
              ),
              // 嵌套Padding
              Container(
                margin: const EdgeInsets.symmetric(vertical: 8),
                color: Colors.blue[50],
                child: Padding(
                  padding: const EdgeInsets.all(8),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    child: const Text("外层8像素，内层水平16像素"),
                  ),
                ),
              ),
              // Container自带padding属性
              Container(
                margin: const EdgeInsets.symmetric(vertical: 8),
                padding: const EdgeInsets.all(10),
                color: Colors.green[50],
                child: const Text("Container自带padding属性"),
              ),
              // 装饰+Padding
              Container(
                margin: const EdgeInsets.symmetric(vertical: 8),
                child: DecoratedBox(
                  decoration: BoxDecoration(
                    color: Colors.orange[100],
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: const Padding(
                    padding: EdgeInsets.symmetric(vertical: 12, horizontal: 24),
                    child: Text("装饰+Padding：上下12，左右24像素"),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  /// 构建带背景色和固定宽度的演示项
  Widget _buildItem({required String label, required EdgeInsets padding}) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 8),
      color: Colors.grey[200],
      width: double.infinity,
      child: Padding(
        padding: padding,
        child: Text(label),
      ),
    );
  }
}